<template>
  <div>
    <van-nav-bar title="头条-登录" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        required
        name="mobile"
        label="手机号"
        placeholder="请输入11位的手机号"
        :rules="[{ required: true, message: '请填写11位数手机号',pattern:/^1[1-9]\d{9}$/ }]"
      />
      <van-field
        v-model="user.code"
        type="code"
        required
        name="密码"
        label="密码"
        placeholder="请输入六位数的密码"
        :rules="[{ required: true, message: '请填写六位数密码', pattern:/^\d{6}$/}]"
      />
      <div style="margin: 16px;">
        <van-button
          :disabled="isLoading"
          :loading='isLoading'
          round
          block
          type="info"
          native-type="submit"
          loading-text="加载中..."
        >登录</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { loginAPI } from '@/api/index.js'
import { Notify } from 'vant'
import { setToken } from '@/utils/token.js'
export default {
  data () {
    return {
      isLoading: false,
      user: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    async onSubmit () {
      console.log(this.user)
      this.isLoading = true
      try {
        const { data: res } = await loginAPI(this.user)
        Notify({ type: 'success', message: '登录成功' })
        console.log(res)
        setToken(res.data.token)
        // 跳转一定要写在最后
        // location.href -> 当前浏览器地址和跳转地址一样（不包含#后面锚点信息）-> 不会刷新网页
        // 地址改变，就会导致网页的刷新
        // this.$router.push() 压栈（会产生历史记录，可以回退），this.$router.replace() 替换（不会产生历史记录）
        this.$router.replace({ path: '/layout/home' })
      } catch (err) {
        Notify({ type: 'danger', message: '手机号或者密码错误' })
      }
      this.isLoading = false
    }
  }
}
</script>
<style lang="less" scoped>
/* 此选择器名字是van-nav-bar组件内标签
scoped尝试把此选择器后属性选择匹配当前页面标签
（选不中组件内部）
lang+'less' 当前style标签内是less语法
用/depp/会把属性选择器加到前面 （用后代选择器的方式往里找匹配的类名）
结论：要修改组件内样式，如果你用lscoped 就需要在选择器前/deep/即可
*/
.van-nav-bar {
  background-color: #0077ff !important;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
</style>
